import 'package:flutter/material.dart';
import 'package:ninetyfour/l10n/app_localizations.dart';
import '../../manger/qysdk_manger.dart';
import '../../main.dart';
import '../../manger/uniqueIdentifier_manager.dart';
import '../../manger/network_utils.dart'; 
import '../../models/serach_info_model.dart'; 
import '../../manger/cached_image_widget.dart';
import '../../class/controller/product_detail.dart';

  List<PageDataListNoModel> noDataList = [];

class ProductNoPage extends StatefulWidget {
  const ProductNoPage({super.key});

  @override
  State<ProductNoPage> createState() => _ProductNoPageState();
}

class _ProductNoPageState extends State<ProductNoPage> {
  @override
  void initState() {
    super.initState();
    loadSearchNoData();
  }

  Future<void> loadSearchNoData() async {
   try {
      final response = await NetworkUtils.get(
        RequestCmd.action,
        params: {"uid": await UniqueIdentifierManager().getUniqueIdentifier()},
      );

      final model = PageSerachNoModel.fromJson(response);
      
      if (model.code == 200) {
        if (model.data?.h5.isNotEmpty ?? false) {
          setState(() {
            noDataList = model.data?.h5 ?? [];
          });
        }
        
      } 
    } catch (e) {
      print('Error loading search no data: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 40,
        leading: IconButton(
          icon: Image.asset('assets/images/leftpush.png'),
          onPressed: () {
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(
                builder: (context) => MainPage(),
              ),
            );
          },
        ),
        title: Text(
          AppLocalizations.of(context)!.productNo2,
          style: TextStyle(fontSize: 17),
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 第一部分
            const SizedBox(height: 25),
            Image.asset(
              'assets/images/nosearch.png',
              width: 160,
              height: 95,
            ),
            const SizedBox(height: 25),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              child: Text(
                AppLocalizations.of(context)!.productNo,
                style: const TextStyle(fontSize: 16, color: Color(0xFF000000)),
              ),
            ),
            
            // 第二部分 - 两个按钮
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 30),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // 第一个按钮
                  SizedBox(
                    width: 140,
                    height: 38,
                    child: OutlinedButton(
                      style: OutlinedButton.styleFrom(
                        side: const BorderSide(color: Color(0xFF5D5FEE), width: 1),
                        backgroundColor: const Color(0xFFF3F3FF),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(19),
                        ),
                      ),
                      onPressed: () {
                        QYSDK.showQYSession();
                      },
                      child: Text(
                        AppLocalizations.of(context)!.contactCustomer,
                        style: const TextStyle(
                          fontSize: 15,
                          color: Color(0xFF5D5FEE),
                        ),
                      ),
                    ),
                  ),
                  
                  // 第二个按钮
                  SizedBox(
                    width: 140,
                    height: 38,
                    child: DecoratedBox(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(19),
                        gradient: const LinearGradient(
                          colors: [Color(0xFF5D60EF), Color(0xFF8A9BFF)],
                        ),
                      ),
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.transparent,
                          shadowColor: Colors.transparent,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(19),
                          ),
                        ),
                        onPressed: () {
                          Navigator.pushReplacement(
                            context,
                            MaterialPageRoute(
                              builder: (context) => MainPage(),
                            ),
                          );
                        },
                        child: Text(
                          AppLocalizations.of(context)!.productNoBack,
                          style: const TextStyle(
                            fontSize: 15,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            
            // 第三部分 - 相关商品标题
            Padding(
              padding: const EdgeInsets.only(left: 27, top: 20),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  AppLocalizations.of(context)!.relatedGoods,
                  style: const TextStyle(
                    fontSize: 15,
                    color: Color(0xFF000000),
                  ),
                ),
              ),
            ),
            
            // 第四部分 - 预留区域
            const SizedBox(height: 20),
            GridView.builder(
              padding: const EdgeInsets.all(10),
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: noDataList.length,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                childAspectRatio: 1 / 1.3, // 近似宽:高 = 1:(1+35/宽)
              ),
              itemBuilder: (context, index) {
                final model = noDataList[index];
                return GestureDetector(
                  onTap: () {
                    // TODO: 点击事件处理，比如跳转详情
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => ProductDetailPage(spuId: model.id),
                      ),
                    );
                  },
                  child: LayoutBuilder(
                    builder: (context, constraints) {
                      final itemWidth = constraints.maxWidth;
                      final imageWidth = itemWidth - 50;
                      return Container(
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(15),
                        ),
                        child: Column(
                          children: [
                            // 图片
                            Container(
                              margin: const EdgeInsets.only(top: 15),
                              alignment: Alignment.center,
                              child: SizedBox(
                                width: imageWidth,
                                height: imageWidth,
                                child: ClipRRect(
                                  borderRadius: BorderRadius.circular(12),
                                  child: CachedImage(
                                    imageUrl: model.pic,
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                            ),
                            // 名称
                            Container(
                              margin: const EdgeInsets.only(
                                  top: 12, left: 5, right: 5, bottom: 10),
                              height: 40,
                              alignment: Alignment.center,
                              child: Text(
                                model.name,
                                maxLines: 2,
                                overflow: TextOverflow.ellipsis,
                                textAlign: TextAlign.center,
                                style: const TextStyle(
                                  fontSize: 14,
                                  color: Color(0xFF000000),
                                ),
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                );
              },
            ),
            
          ],
        ),
      ),
    );
  }
}